<template>
  <view>
    <zero-loading v-if="loading"></zero-loading>
    <view class="tag">
            <view class="tag-tit">
              {{value}}
            </view>
           <view class="container">
             <view class="cloud front">
               <span class="left-front"></span>
               <span class="right-front"></span>
             </view>
             <span class="sun sunshine"></span>
             <span class="sun"></span>
             <view class="cloud back">
               <span class="left-back"></span>
               <span class="right-back"></span>
             </view>
     </view>
    </view>
    <view class="tagbook">
      <view style="margin: 10px 0;" v-for="(item,index) in data" :key="index">
        <blog :data='item'></blog>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value:'',
        data:[]
      };
    },
    onLoad(option) {
      this.value = option.tag
      this.gettagbook(this.value)
    },
    methods:{
      gettagbook(val){
        uni.$req.req(this,'gettagbook',{key:'tags',value:val}).then((res)=>{
          let {result} = res
          if(result.code){
            this.data = result.data
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.tag{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tag-tit{
    font-size: 20px;
    line-height: 20px;
    margin-left: 15px;
   background: linear-gradient(to left, #ffdde1, #ee9ca7);
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
    padding: 15px;
    border-left: 3px solid #4c9beb;
  }
  .container {
    width: 200px;
    height: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
            .cloud {
              width: 250px;
            }
            
            .front {
              padding-top: 45px;
              margin-left: 25px;
              display: inline;
              position: absolute;
              z-index: 11;
              -webkit-animation: clouds 8s infinite;
                      animation: clouds 8s infinite;
              -webkit-animation-timing-function: ease-in-out;
                      animation-timing-function: ease-in-out;
            }
            
            .back {
              margin-top: -30px;
              margin-left: 150px;
              z-index: 12;
              -webkit-animation: clouds 12s infinite;
                      animation: clouds 12s infinite;
              -webkit-animation-timing-function: ease-in-out;
                      animation-timing-function: ease-in-out;
            }
            
            .right-front {
              width: 45px;
              height: 45px;
              border-radius: 50% 50% 50% 0%;
              background-color: #4c9beb;
              display: inline-block;
              margin-left: -25px;
              z-index: 5;
            }
            
            .left-front {
              width: 65px;
              height: 65px;
              border-radius: 50% 50% 0% 50%;
              background-color: #4c9beb;
              display: inline-block;
              z-index: 5;
            }
            
            .right-back {
              width: 50px;
              height: 50px;
              border-radius: 50% 50% 50% 0%;
              background-color: #4c9beb;
              display: inline-block;
              margin-left: -20px;
              z-index: 5;
            }
            
            .left-back {
              width: 30px;
              height: 30px;
              border-radius: 50% 50% 0% 50%;
              background-color: #4c9beb;
              display: inline-block;
              z-index: 5;
            }
            
            .sun {
              width: 120px;
              height: 120px;
              background: -webkit-gradient(linear, left top, right top, from(#fcbb04), to(#fffc00));
              background: linear-gradient(to right, #fcbb04, #fffc00);
              border-radius: 60px;
              display: inline;
              position: absolute;
            }
            
            .sunshine {
              -webkit-animation: sunshines 2s infinite;
                      animation: sunshines 2s infinite;
            }
  }
  
  

}

.tagbook{
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
  @keyframes sunshines {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0.6;
    }
  
    100% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4);
      opacity: 0;
    }
  }

 @keyframes clouds {
    0% {
      -webkit-transform: translateX(15px);
              transform: translateX(15px);
    }
  
    50% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
  
    100% {
      -webkit-transform: translateX(15px);
              transform: translateX(15px);
    }
  }
</style>
